<template>
  <view class="siteTopology-detail">
    <view class="header">
      <!-- 站点拓扑 -->
      {{ t("siteTopology.title") }}
    </view>

    <view class="siteTopology-content">
      <!-- 光伏 充电桩-->
      <view class="pv-charger pv-charger-top">
        <view class="pv-charger-item">
          <!-- -->
          <template v-if="siteTopologyData.mpptFlag == 1">
            <view class="pv-description">
              <view class="name">
                {{ props.siteTopologyData.mpptWorkStatus }}
              </view>
              <view class="value">
                {{ props.siteTopologyData.mpptActivePower }}kW
              </view>
            </view>
            <view class="pv-icon">
              <image src="/static/photovoltaic.png" class="module-img"></image>
              <view class="pv-icon-name">
                {{ t("siteTopology.photovoltaic") }}
                <!-- 光伏 -->
              </view>
              <view class="line-one" style="transform: rotate(90deg)">
                <lineItem
                  :isOutPut="pvFlowDirectionIsOut"
                  :isFlowNum="Number(props.siteTopologyData.mpptActivePower)"
                />
              </view>
            </view>
          </template>
        </view>

        <view class="pv-charger-item">
          <!--  -->
          <template v-if="siteTopologyData.chargingStationFlag == 1">
            <view class="pv-icon">
              <image src="/static/chargingPiles.png" class="module-img"></image>
              <view class="pv-icon-name">
                {{ t("siteTopology.chargingPiles") }}
                <!-- 充电桩  -->
              </view>
              <view
                class="line-one line-right"
                style="transform: rotate(90deg)"
              >
                <lineItem
                  :isOutPut="chargingPiles"
                  :isFlowNum="
                    Number(props.siteTopologyData.chargingStationActivePower)
                  "
                />
              </view>
            </view>
            <view class="pv-description">
              <view class="value">
                {{ props.siteTopologyData.chargingStationActivePower }}kW
              </view>
            </view>
          </template>
        </view>
      </view>
      <!-- 储能 电网 -->
      <view class="pv-charger siteTopology-center align-start">
        <template v-if="siteTopologyData.systemFlag == 1">
          <view class="pv-charger-item flex-common">
            <view class="pv-icon flex-end">
              <image
                src="/static/operationalStatus.png"
                class="module-img"
              ></image>
              <view class="pv-icon-name">
                {{ t("siteTopology.energyStorage") }}
                <!-- 储能  -->
              </view>
            </view>
            <view
              class="pv-description-energyStorage"
              style="width: 120rpx; height: 100rpx"
            >
              <view class="name">
                {{ props.siteTopologyData.systemWorkStatus }}
              </view>
              <view class="value">
                {{ props.siteTopologyData.systemActivePower }}kW
              </view>
              <view class="value">soc:{{ props.siteTopologyData.soc }}%</view>
            </view>
          </view>
        </template>

        <view class="center">
          <!-- 储能 -->
          <view class="line-one">
            <template v-if="siteTopologyData.systemFlag == 1">
              <lineItem
                :isOutPut="energyStorage"
                :isFlowNum="Number(props.siteTopologyData.systemActivePower)"
              />
            </template>
          </view>

          <!-- 中间公用 -->
          <view class="round-balls">
            <template
              v-if="
                siteTopologyData.systemFlag == 1 ||
                siteTopologyData.mpptFlag == 1
              "
            >
              <image src="/static/smallRoundBalls.png" mode="" />
            </template>
          </view>

          <view class="line-one">
            <template
              v-if="
                siteTopologyData.systemFlag == 1 ||
                siteTopologyData.mpptFlag == 1
              "
            >
              <lineItem
                :isOutPut="firstNode"
                :isFlowNum="
                  Number(props.siteTopologyData.systemActivePower) +
                  Number(props.siteTopologyData.mpptActivePower)
                "
              />
            </template>
          </view>

          <view class="round-balls">
            <template
              v-if="
                siteTopologyData.systemFlag == 1 ||
                siteTopologyData.mpptFlag == 1
              "
            >
              <image src="/static/smallRoundBalls.png" mode="" />
            </template>
          </view>

          <view class="line-one" style="transform: rotate(180deg)">
            <template
              v-if="
                siteTopologyData.gridFlag == 1 ||
                siteTopologyData.chargingStationFlag == 1
              "
            >
              <lineItem
                :isOutPut="powerGrid"
                :isFlowNum="
                  Number(props.siteTopologyData.chargingStationActivePower) +
                  Number(props.siteTopologyData.gridActivePower)
                "
              />
            </template>
          </view>
          <!-- 电网 -->
          <view class="round-balls">
            <template
              v-if="
                siteTopologyData.gridFlag == 1 ||
                siteTopologyData.chargingStationFlag == 1
              "
            >
              <image src="/static/smallRoundBalls.png" mode="" />
            </template>
          </view>

          <view class="line-one" style="transform: rotate(180deg)">
            <template v-if="siteTopologyData.gridFlag == 1">
              <lineItem
                :isOutPut="lastNode"
                :isFlowNum="Number(props.siteTopologyData.gridActivePower)"
              />
            </template>
          </view>
        </view>
        <view class="pv-charger-item flex-end flex-common">
          <template v-if="siteTopologyData.gridFlag == 1">
            <view class="pv-icon">
              <image src="/static/powerGrid.png" class="module-img"></image>
              <view class="pv-icon-name">
                {{ t("siteTopology.powerGrid") }}
              </view>
            </view>
            <view
              class="pv-description-energyStorage"
              style="width: 120rpx; height: 100rpx"
            >
              <view class="value">
                {{ props.siteTopologyData.gridActivePower }}kW
              </view>
            </view>
          </template>
        </view>
      </view>
      <!-- 负载 -->
      <view class="pv-charger load">
        <template v-if="siteTopologyData.loadFlag == 1">
          <view class="last">
            <view class="line-one" style="transform: rotate(-90deg)">
              <lineItem
                :isOutPut="load"
                :isFlowNum="Number(props.siteTopologyData.loadActivePower)"
              />
            </view>
          </view>
          <view class="pv-charger-item">
            <view class="pv-icon">
              <image src="/static/load.png" class="module-img"></image>
              <view class="pv-icon-name">
                {{ t("siteTopology.load") }}
                <!-- 负载 -->
              </view>
            </view>
            <view class="pv-description">
              <view class="value">
                {{ props.siteTopologyData.loadActivePower }}kW
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import lineItem from "./lineItem.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  siteTopologyData: {
    type: Object,
    default: {},
  },
});
// 光伏是否流出
const pvFlowDirectionIsOut = computed(() => {
  return Number(props.siteTopologyData.mpptActivePower) > 0;
});
// 储能是否流出
const energyStorage = computed(() => {
  return Number(props.siteTopologyData.systemActivePower) > 0;
});
// 电网是否流出
const powerGrid = computed(() => {
  return Number(props.siteTopologyData.gridActivePower) > 0;
});
// 充电桩是否流出
const chargingPiles = computed(() => {
  return Number(props.siteTopologyData.chargingStationActivePower) > 0;
});
// 负载是否流出
const load = computed(() => {
  return Number(props.siteTopologyData.loadActivePower) > 0;
});

const firstNode = computed(() => {
  return pvFlowDirectionIsOut.value || energyStorage.value;
});

const lastNode = computed(() => {
  return powerGrid.value || chargingPiles.value;
});
</script>

<style scoped lang="scss">
.siteTopology-detail {
  width: 100%;
  border-radius: 16rpx;
  background: #132034;
  padding: 32rpx 10rpx;
  box-sizing: border-box;

  .header {
    padding: 0rpx 39rpx;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    font-family: PingFangSC;
    font-size: 32rpx;
    font-weight: normal;
    color: #eeeeee;
  }

  .header::after {
    content: "";
    position: absolute;
    left: -10rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 32rpx;
    border-radius: 0px 8rpx 8rpx 0rpx;
    opacity: 1;
    background: #64b7f6;
  }

  .siteTopology-content {
    width: 100%;
    padding: 41rpx 0;
    box-sizing: border-box;
    position: relative;

    .pv-charger {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 62rpx;
      box-sizing: border-box;

      .pv-charger-item {
        width: 222rpx;
        display: flex;
        justify-content: space-between;

        .pv-icon {
          display: flex;
          flex-direction: column;

          .module-img {
            width: 112rpx;
            height: 120rpx;
          }

          .pv-icon-name {
            height: 40rpx;
            background-image: url("/static/pv-icon-name-bg.png");
            background-size: 100% 100%;
            font-family: Alibaba PuHuiTi 3;
            font-size: 15rpx;
            font-weight: normal;
            font-variation-settings: "opsz" auto;
            color: #ffffff;
            text-align: center;
            line-height: 40rpx;
            margin-top: 8rpx;
            white-space: normal;
            word-break: break-all;
            overflow-wrap: break-word;
          }

          .line-one {
            margin-top: 66rpx;
          }
        }

        .pv-description {
          width: 100rpx;
          height: 64rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-image: url("/static/pv-description.png");
          background-size: 100% 100%;
          font-family: Alibaba PuHuiTi 3;
          font-size: 20rpx;
          font-weight: normal;
          font-variation-settings: "opsz" auto;
          color: #ffffff;
          position: relative;
          top: 20rpx;
        }
      }
    }

    .pv-charger-top {
      margin-bottom: -20rpx;
    }

    .siteTopology-center {
      padding: 0 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;

      .pv-description-energyStorage {
        width: 100rpx;
        height: 64rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url("/static/pv-description.png");
        background-size: 100% 100%;
        font-family: Alibaba PuHuiTi 3;
        font-size: 20rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #ffffff;
        margin-top: 8rpx;
      }

      .center {
        display: flex;
        flex: 1;
        justify-content: flex-start;
        align-items: center;
        margin-top: 30rpx;

        .line-one {
          width: 66rpx;
          transform-origin: center;
        }

        .round-balls {
          margin: 0 12rpx;
          display: flex;
          align-items: center;

          image {
            width: 16rpx;
            height: 16rpx;
          }
        }
      }
    }

    .flex-common {
      flex-direction: column;
    }

    .flex-end {
      justify-content: flex-end !important;
    }

    .flex-start {
      justify-content: flex-start !important;
    }

    .align-start {
      align-items: flex-start;
    }

    .flex-center {
      justify-content: center;
    }

    .flex-common {
      flex-direction: column;
    }

    .load {
      margin: -120rpx auto 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      .line-one {
        position: relative;
        top: -50rpx;
        transform-origin: center;

        :deep(.line-item) {
          width: 99rpx;
        }
      }

      .pv-charger-item {
        position: relative;
        left: 56rpx;
      }
    }

    // .lines {
    //   position: absolute;
    //   top: 252rpx;
    //   left: 140rpx;
    //   .top {
    //     width: 280rpx;
    //     margin: 0 auto;
    //     display: flex;
    //     justify-content: space-between;
    //     .line-one {
    //       transform-origin: center;
    //     }
    //     .line-right {
    //       position: relative;
    //       left: -2rpx;
    //     }
    //   }
    //   .center {
    //     display: flex;
    //     justify-content: flex-start;
    //     align-items: center;
    //     margin-top: 30rpx;
    //     .line-one {
    //       transform-origin: center;
    //     }
    //     .round-balls {
    //       margin: 0 12rpx;
    //       display: flex;
    //       align-items: center;
    //       image {
    //         width: 16rpx;
    //         height: 16rpx;
    //       }
    //     }
    //   }
    //   .last {
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     margin-top: 52rpx;
    //     position: relative;
    //     left: -2rpx;
    //     .line-one {
    //       transform-origin: center;
    //       :deep(.line-item) {
    //         width: 99rpx;
    //       }
    //     }
    //   }
    // }
  }
}
</style>
